<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户注册</title>
	<style>
        .container {
            background-color: whitesmoke;
            width: 1200px;
            height: 763px;
            margin: 0 auto;
            text-align: center;
        }

	</style>
</head>
<body>
<div id="app">
	<div class="container">
		<p>用户列表</p>
		<input type="button" value="注册" @click="handleClick">
		<div v-show="isVisible === true">
			<form action="/user/register" method="post" enctype="multipart/form-data">
				<input type="text" name="username" placeholder="请输入用户名">
				<input type="password" name="password" placeholder="请设置登录密码">
				<input type="text" name="userTel" placeholder="请输入联系方式">
				<input type="file" name="file">
				<input type="submit" value="注册" @click="handleSubmit">
			</form>
		</div>
		<table border=1 cellspacing="0" cellpadding="0" width="1200px" height="400px">
			<tr>
				<td>ID</td>
				<td>姓名</td>
				<td>头像</td>
				<td>电话</td>
				<td>注册时间</td>
			</tr>
			<tr v-for="user in users">
				<td>{{user.id}}</td>
				<td>{{user.username}}</td>
				<td><img :src="user.avatar" alt="" width="50" height="50"></td>
				<td>{{user.userTel}}</td>
				<td>{{user.registrationTime}}</td>
			</tr>
		</table>

	</div>
</div>
</body>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                users: {
                    type: Array,
                    default() {
                        return [];
                    }
                },
                isVisible: false
            }
        },
        mounted() {
            axios.get('api/user/list')
                .then(
                    res => {
                        this.users = res.data;
                        // console.log(res.data)
                    }
                )
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
        },
        methods: {
            handleClick() {
                this.isVisible = true
            },
            handleSubmit() {
                this.isVisible = false

            }
        }
    });

</script>
</html>